<template>
	<NavBar :obj="{ title: title, color: '#000', backgroundColor: '#fff' }" />
	<view class="container">
		<view class="title">设置新的{{ type == 'parent_code' ? '推荐人' : title }}</view>
		<block v-if="type !== 'mobile'">
			<view class="main">
				<view class="main_li">
					<block v-if="type == 'parent_code'">
						<input type="text" v-model="info.parent_code" placeholder="请输入新的推荐人" placeholder-class="inp" />
					</block>
					<block v-else>
						<!-- #ifdef MP-WEIXIN -->
						<input type="nickname" v-model="info.nickname" placeholder="请输入新昵称" placeholder-class="inp" />
						<!-- #endif -->
						<!-- #ifdef H5 -->
						<input type="text" v-model="info.nickname" placeholder="请输入新昵称" placeholder-class="inp" />
						<!-- #endif -->
					</block>
				</view>
			</view>
			<view class="confirm" @click="confirm">确认</view>
		</block>
		<block v-else>
			<view class="main">
				<view class="main_li">
					<input type="text" v-model="mobile" placeholder="请输入手机号" placeholder-class="inp" />
				</view>
			</view>
			<view class="main">
				<view class="main_li">
					<input type="text" v-model="smsCode" placeholder="请输入验证码" placeholder-class="inp" />
					<view class="u-code">
						<view @click="sendMsg" class="login-code-btn" :class="hasGetCode ? 'login-code-bg' : ''">{{ codeViewMsg }}</view>
					</view>
				</view>
			</view>
			<view class="confirm" @click="submit">确认</view>
		</block>
	</view>
</template>

<script setup>
	import { ref } from 'vue';
	import { port, goUrl, hint, goBack, loading, closeLoading } from '/service/port';
	import { onLoad } from '@dcloudio/uni-app';
	const title = ref();
	const type = ref();
	const info = ref({
		nickname: '',
		parent_code: ''
	});
	const mobile = ref('');
	const codeViewMsg = ref('获取验证码');
	const countDown = ref(60);
	const btnDisabled = ref(true);
	const hasGetCode = ref(false);
	const smsCode = ref('');
	onLoad((op) => {
		if (op) {
			title.value = op.title;
			type.value = op.type;
		}
	});
	async function confirm() {
		uni.showModal({
			title: '请确认',
			content: type.value == 'parent_code' ? '绑定后不可更改，请确认是否绑定？' : '确定要修改吗？',
			confirmColor: '#FB3204',
			success: async function (res) {
				if (res.confirm) {
					loading();
					let res = await port('saveUser', info.value);
					closeLoading();
					setTimeout(() => {
						hint(res.msg);
						if (info.value.parent_code != '') {
							uni.setStorageSync('waitParentCode', 1);
						}
						goBack();
					}, 300);
				}
			}
		});
	}
	async function sendMsg() {
		if (hasGetCode.value) return;
		if (mobile.value == '') {
			hint('手机号不能为空');
			return;
		}
		let res = await port('sendSms', {
			mobile: mobile.value,
			action: 'changeMobile'
		});
		hint(res.msg);
		//短信发送
		if (res.code == 1) {
			countDownData();
		}
	}
	async function submit() {
		let res = await port('userDoMobile', {
			mobile: mobile.value,
			captcha: smsCode.value
		});
		hint(res.msg);
		setTimeout(() => {
			goBack();
		}, 1000);
	}
	async function countDownData() {
		btnDisabled.value = false;
		hasGetCode.value = true;
		setTimeout(() => {
			countDown.value--;
			codeViewMsg.value = '重新获取(' + countDown.value + 's)';
			if (countDown.value <= 0) {
				countDown.value = 60;
				codeViewMsg.value = '获取验证码';
				hasGetCode.value = false;
				return;
			}
			countDownData();
		}, 1000);
	}
</script>

<style scoped lang="scss">
	:global(page) {
		background-color: #f4f5f8;
	}
	.container {
		margin: 0 30upx;
		.title {
			margin-top: 44upx;
			color: #666;
			font-size: 26upx;
		}
		.main {
			background: #fff;
			border-radius: 20upx;
			margin-top: 30upx;
			.main_li {
				height: 100upx;
				color: #000;
				font-size: 28upx;
				display: flex;
				justify-content: space-between;
				align-items: center;
				position: relative;
				input {
					width: 100%;
				}
				.u-code {
					position: absolute;
					right: 0;
					.login-code-btn {
						height: 60upx;
						line-height: 60upx;
						padding: 0 30upx;
						background-color: #F81A2E;
						color: #fff;
						font-size: 26upx;
						border-radius: 20px;
					}
					.login-code-bg {
						background-color: #999 !important;
					}
				}
			}
		}
		.confirm {
			margin-top: 86upx;
			color: #fff;
			background: linear-gradient(-90deg, #F81A2E 0%, #FC4856 100%);
			text-align: center;
			line-height: 88upx;
			border-radius: 88upx;
		}
	}
</style>
